<!-- 退货商品汇总统计 -->
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="70px">
      <el-form-item label="查询时间" prop="processName">
        <el-date-picker
          v-model="queryParams.begainTime"
          type="date"
          placeholder="选择日期">
        </el-date-picker> - 
        <el-date-picker
          v-model="queryParams.endTime"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="制单时间" prop="processName">
        <el-date-picker
          v-model="queryParams.begainTime"
          type="date"
          placeholder="选择日期">
        </el-date-picker> - 
        <el-date-picker
          v-model="queryParams.endTime"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="入库时间" prop="processName">
        <el-date-picker
          v-model="queryParams.begainTime"
          type="date"
          placeholder="选择日期">
        </el-date-picker> - 
        <el-date-picker
          v-model="queryParams.endTime"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="店铺名称" prop="processCode">
        <el-input
          v-model="queryParams.processCode"
          placeholder="请输入工序编码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="退货原因" prop="enableFlag">
        <el-input
          v-model="queryParams.enableFlag"
          placeholder="请输入是否启用"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="退入仓库" prop="enableFlag">
        <el-input
          v-model="queryParams.enableFlag"
          placeholder="请输入是否启用"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="三无包裹" prop="enableFlag">
        <el-input
          v-model="queryParams.enableFlag"
          placeholder="请输入是否启用"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item style="margin: 0 40px;">
        <el-checkbox 
          v-for="status in statusList" 
          v-model="status.checked"
          :label="status.label" 
          :key="status.value"
        >
        </el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          plain
          icon="el-icon-download"
          size="mini"
          v-hasPermi="['mes:pro:process:edit']"
        >CSV导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <dorpTable :tableData="tableData" :col="col"></dorpTable>
    <pagination
      v-show="total>=0"
      :total="total"
      :page.sync="queryParams1.pageNum"
      :limit.sync="queryParams1.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import dorpTable from '@/components/dorptable/index.vue'
export default {
  name: 'storeInformation',
  components: { dorpTable },
  data() {
    return {
      showSearch: true,
      queryParams: {
        begainTime: '',
        endTime: '',
      },
      queryParams1:{
        pageNum: 1,
        pageSize: 10,
      },
      col:[
        {label: '日期',  prop: 'date' , width: 150, fixed: true},  
        { label: '姓名',  prop: 'name' }, 
        {label: '地址1', prop: 'address'},
        {label: '地址2', prop: 'city'},
        {label: '地址3', prop: 'province'},
        {label: '地址4', prop: 'zip'},
        {label: '地址5', prop: 'province'},
        {label: '地址6', prop: 'city'},
        {label: '地址7', prop: 'zip'},
        {label: '地址7', prop: 'zip'},
        {label: '地址7', prop: 'zip'},
      ],
      tableData: [{
        id: 1,
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          id: 2,
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          id: 3,
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          id: 4,
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          id: 5,
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          id: 6,
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          id: 7,
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          id: 8,
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          id: 9,
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          id: 10,
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }],
      statusList: [
        {
          label: '发货',
          checked: false,
          value: 1
        },
        {
          label: '外仓单据',
          checked: false,
          value: 2
        },
        {
          label: '发货单打印',
          checked: false,
          value: 3
        },
        {
          label: '作废',
          checked: false,
          value: 4
        },
      ],
      total: 0,
      activeIndex: 8,
    }
  },
  created() {

  },
  mounted () {
  },
  methods: {
    getList(){
      console.log('11');
    },
    handleQuery(){
      console.log(this.queryParams, this.statusList);
    },
    resetQuery(){
      console.log('11');
    },
  }
}
</script>

<style lang="scss" scoped>
.app-container{

}
</style>